<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="theme-color" content="#000000" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <link rel="stylesheet" href="//fonts.googleapis.cn/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" />
    <link rel="stylesheet" href="./src/assets/style.css" />
    <link rel="stylesheet" href="./src/assets/load.css" />
    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
    <title>计时器 | 晴雨笔记</title>
    <script>
      // 优化 loadBox 隐藏逻辑
      window.onload = function() {
        const loadBox = document.querySelector(".loadBox");
        if (loadBox) {
          // 使用 opacity 过渡而不是直接隐藏
          loadBox.style.opacity = "0";
          loadBox.style.transition = "opacity 0.3s ease";
          setTimeout(() => {
            loadBox.style.display = "none";
          }, 300);
        }
      };
    </script>
  </head>
  <body>
    <noscript>
      <div class="browser-warning">您的浏览器未启用 JavaScript。请启用 JavaScript 以正常访问此网站，或者使用更先进的浏览器，如 <a href="https://www.google.com/chrome/">Google Chrome</a>、<a href="https://www.mozilla.org/zh-CN/firefox/new/">Mozilla Firefox</a> 或 <a href="https://www.microsoft.com/zh-cn/edge">Microsoft Edge</a>。</div>
    </noscript>
    <div class="loadBox">
      <main class="loader-container">
        <div class="loader-state">
          <svg class="nyan" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 47 20" style="transform: translateZ(0);">
            <defs>
              <linearGradient id="rainbow-colors" x1="0.5" x2="0.5" y2="1">
                <stop class="rainbow-color1" offset="0" />
                <stop class="rainbow-color1" offset="0.167" />
                <stop class="rainbow-color2" offset="0.167" />
                <stop class="rainbow-color2" offset="0.335" />
                <stop class="rainbow-color3" offset="0.335" />
                <stop class="rainbow-color3" offset="0.5" />
                <stop class="rainbow-color4" offset="0.5" />
                <stop class="rainbow-color4" offset="0.669" />
                <stop class="rainbow-color5" offset="0.669" />
                <stop class="rainbow-color5" offset="0.833" />
                <stop class="rainbow-color6" offset="0.833" />
                <stop class="rainbow-color6" offset="1" />
              </linearGradient>
            </defs>
            <g class="rainbow">
              <rect />
              <rect />
              <rect />
              <rect />
              <rect />
              <rect />
            </g>
            <g class="pig">
              <g class="foot" transform="translate(52)">
                <rect width="1" height="3" transform="translate(6 13)" />
                <rect width="1" height="3" transform="translate(8 13)" />
                <rect width="1" height="3" transform="translate(14 13)" />
                <rect width="1" height="3" transform="translate(12 13)" />
              </g>
              <g class="tail">
                <rect width="1" height="1" transform="translate(4 10)" />
                <rect width="1" height="1" transform="translate(3 11)" />
              </g>

              <g transform="translate(52)">
                <rect class="body1" width="8" height="8" transform="translate(7 6)" />
                <rect class="body1" width="10" height="8" transform="translate(6 7)" />
                <rect class="body1" width="12" height="6" transform="translate(5 8)" />
                <rect class="body2" width="10" height="6" transform="translate(6 8)" />
                <rect class="body2" width="8" height="6" transform="translate(7 7)" />
                <rect class="stains" width="4" height="1" transform="translate(7 13)" />
                <rect class="stains" width="2" height="1" transform="translate(8 12)" />
                <rect class="stains" width="2" height="1" transform="translate(6 9)" />
                <rect class="stains" width="3" height="1" transform="translate(6 8)" />
                <rect class="stains" width="3" height="1" transform="translate(7 7)" />
                <rect class="stains" width="1" height="1" transform="translate(14 7)" />
              </g>
              <g class="ears" transform="translate(52)">
                <rect width="1" height="3" transform="translate(10 5)" />
                <rect width="1" height="3" transform="translate(15 5)" />
              </g>
              <g class="snout">
                <rect class="snout1" width="5" height="3" transform="translate(13 10)" />
                <rect class="snout-holes" width="1" height="3" transform="translate(17 11) rotate(90)" />
                <rect class="snout2" width="1" height="1" transform="translate(16 11) rotate(90)" />
              </g>
              <g class="eyes">
                <rect width="1" height="1" transform="translate(12 9)" />
                <rect width="1" height="1" transform="translate(15 9)" />
              </g>
            </g>
          </svg>
        </div>
        <span class="loader-text">Loading...</span>
        <div class="background-container">
          <div class="stars"></div>
        </div>
      </main>
    </div>
    <div id="root"></div>
    <script src="/src/index.tsx" type="module"></script>
  </body>
</html>
